<template>
    <ul>
        <li v-for="(item, index) in list" :key="index">
            <el-button @click="cap(item)" type="primary" plain>{{ item }}</el-button>
        </li>
    </ul>

    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="商品名称" prop="proname" width="180">
                <!-- scope.$index, 当前的行数   scope.row    当前行的 对应 的数组中 元素 -->
                <!-- 具名插槽--  scope--作用域插槽--把组件内部的数据 反向传递给父组件 -->
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span>{{ scope.row.proname }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="商品价格" prop="originprice">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span>{{ scope.row.originprice }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="商品分类" prop="category">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span>{{ scope.row.category }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="商品图片" prop="img1">
                <template #default="scope">
                    <!-- :preview-teleported="true" 传送到 body中 -->
                    <el-image :preview-teleported="true" style="width: 100px; height: 100px" :src="scope.row.img1" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[scope.row.img1]" fit="cover" />
                </template>
            </el-table-column>

            <el-table-column prop="sales" label="销量" />
            <el-table-column prop="stock" label="库存" />

            <el-table-column label="是否售卖">
                <template #default="scope">
                    <!-- :active-value="1"  设置开的值
            :inactive-value="0"  设置关的值-->
                    <el-switch v-model="scope.row.issale" :active-value="1" :inactive-value="0" @change="handlerChangeSale(scope.$index, scope.row)" />
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>

                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 编辑的时候 弹出对话框 -->
    <el-dialog v-model="isEdit" title="商品编辑" width="500">
        <el-form :model="eidtForm">
            <el-form-item label="商品名称">
                <el-input v-model="eidtForm.proname" autocomplete="off" />
            </el-form-item>

            <el-form-item label="商品价格">
                <el-input v-model="eidtForm.originprice" autocomplete="off" />
            </el-form-item>

            <el-form-item label="商品品牌">
                <el-input v-model="eidtForm.brand" autocomplete="off" />
            </el-form-item>

            <el-form-item label="商品库存">
                <el-input v-model="eidtForm.stock" autocomplete="off" />
            </el-form-item>

            <el-form-item label="是否售卖">
                <el-switch v-model="eidtForm.issale" :active-value="1" :inactive-value="0" />
            </el-form-item>

            <el-form-item label="商品图片">
                <!-- 上传图片--图片墙 -->
                <!-- action 上传图片的接口地址 -->
                <!-- v-model:file-list 上传图片的数组 -->
                <el-upload v-model:file-list="fileList" action="http://localhost:3001/admin/file/upload" name="img" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="uploadImgSuccess">
                    <el-icon><Plus /></el-icon>
                </el-upload>

                <el-dialog v-model="previewDialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </el-form-item>

            <el-form-item label="详情">
                <el-input v-model="eidtForm.desc" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="isEdit = false">取消</el-button>
                <el-button type="primary" @click="saveHandler()"> 保存 </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 删除的时候 弹框的对话框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="500" :before-close="handleClose">
        <span>是否删除</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="deleteConfirm"> 确定 </el-button>
            </div>
        </template>
    </el-dialog>
    <div><el-button @click="pre()">上一页</el-button>{{ count }} <el-button @click="next()">下一页</el-button></div>
</template>
<script>
import { useList } from "../stores/list.js";
import { List, upd, Dele } from "@/api/api/list";
import { getCategory } from "../api/api/getCategory";
export default {
    data() {
        return {
            list: [],
            count: 1,
            limitNum: 5,
            pagenum: 1,
            pagesize: 10,
            tableData: [],
            dialogVisible: false,
            deleteRow: {},
            isEdit: false,
            eidtForm: {},
            fileList: [{ name: "", url: "" }],
            dialogImageUrl: "",
            previewDialogVisible: false,
        };
    },
    created() {
        this.getlist();
        let a = this.count;
        let b = this.limitNum;
        this.getData(a, b);
    },
    computed: {},
    mounted() {},
    methods: {
        cap(item) {
            //console.log(item);
            let a = this.count;
            let b = this.limitNum;
            let c = item;
            this.getDatacap(a, b, c);
        },
        next() {
            this.count = this.count + 1;
            let a = this.count;
            let b = this.limitNum;
            this.getData(a, b);
        },
        pre() {
            this.count = this.count - 1;
            let a = this.count;
            let b = this.limitNum;
            this.getData(a, b);
        },
        getlist() {
            getCategory().then((res) => {
                this.list = res.data.data;
                //console.log(res.data.data);
            });
        },
        getData(a, b) {
            List(a, b).then((res) => {
                //console.log(1);
                //console.log("res", res);
                this.tableData = res.data.data;
            });
        },
        getDatacap(a, b, c) {
            List(a, b, c).then((res) => {
                //console.log(1);
                //console.log("res", res);
                this.tableData = res.data.data;
            });
        },
        handleClose() {
            //console.log("handleClose");
            this.dialogVisible = false;
        },
        handlerChangeSale(index, row) {
            //console.log(row.proid, { issale: row.issale });
            upd(row.proid, { issale: row.issale }).then((r) => {
                //console.log(r.data);
                this.getData();
            });
        },
        handleDelete(index, row) {
            this.dialogVisible = true;
            this.deleteRow = row;
        },
        deleteConfirm() {
            let that = this;
            Dele(this.deleteRow.proid).then((r) => {
                //console.log(r);
                this.dialogVisible = false;
                let a = that.count;
                let b = that.limitNum;
                that.getData(a, b);
            });
        },
        uploadImgSuccess(r) {
            //console.log(r.fileUrl);
            //console.log(r.response);
            //console.log(this.fileList);

            // //console.log(this.fileList);
            //console.log("flielist", this.fileList);
            let n = this.fileList.length;
            //console.log(n);
            //console.log(this.fileList[n - 1]);
            this.fileList[n - 1].url = r.fileUrl;
            //console.log("edit", this.eidtForm);
        },
        handleEdit(index, row) {
            //console.log("row", row);
            this.isEdit = true;
            this.eidtForm = { ...row };
            this.fileList = [];
            for (let index = 1; index < 5; index++) {
                let imgKey = "img" + index;
                let imgUrl = this.eidtForm[imgKey];
                // //console.log(imgKey, imgUrl, this.eidtForm);
                if (imgUrl != "") {
                    this.fileList.push({
                        name: imgKey,
                        url: imgUrl,
                    });
                }
            }
        },
        handlePictureCardPreview(fileObj) {
            this.previewDialogVisible = true;
            this.dialogImageUrl = fileObj.url;
            //console.log(fileObj);
        },
        handleRemove(fileObj, fileList) {
            //console.log("1234567", fileObj, fileList);
        },
        saveHandler() {
            //console.log("12345", this.fileList);
            //console.log("1234", this.eidtForm);
            let banners = this.fileList.map((v) => v.url);
            //console.log("123", banners);
            let bannersStr = banners.join(",");
            this.eidtForm.banners[0] = bannersStr;
            for (let index = 0; index < 4; index++) {
                this.eidtForm["img" + (index + 1)] = "";
            }
            banners.forEach((v, i) => {
                this.eidtForm["img" + (i + 1)] = v;
            });

            upd(this.eidtForm.proid, { ...this.eidtForm }).then((r) => {
                //console.log(r.data);
                this.isEdit = false;
                this.getData();
            });
        },
    },
};
</script>
<style lang="css" scoped>
ul {
    overflow-x: auto;
    display: -webkit-box;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0.5rem;
}
ul::-webkit-scrollbar {
    display: none;
}
li {
    list-style: none;
    float: left;
}
</style>
